html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  /* background: #f0f0f0; */
  box-sizing: border-box;
  padding-top: 30px;
}

.container {
  width: 60%;
  text-indent: 20px;
  line-height: 2;
  font-size: 18px;
  margin: 0 auto;
  position: relative;
}

.eraser {
  position: absolute;
  /* 这里等同于top:0 right:0 bottom:0 left:0 */
  inset: 0;
}

.text {
  --p: 0%;
  color: transparent;
  background: linear-gradient(
    to right,
    #fff0 var(--p),
    #fff calc(var(--p) + 30px)
  );
  animation: erase 10s linear forwards;
}

/* css变量不是css属性，动画不能监听和改变其值，所以把css变量定义为属性 */
@property --p {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@keyframes erase {
  to {
    --p: 100%;
  }
}
